<template>
  <div>
    <el-container>
      <el-header style="display: flex;justify-content: space-between;align-items: center;padding-left: 0px">
        <el-button size="mini" type="success" @click="exportRecord" icon="el-icon-download">导出数据</el-button>
      </el-header>
      <el-main style="padding-left: 0px;padding-top: 0px">
        <div>
          <el-card>
            <el-table
              :data="tableData"
              stripe
              border
              v-loading="tableLoading"
              size="mini"
              style="width: 100%">
              <el-table-column
                width="120"
                prop="workID"
                align="center"
                label="员工工号">
              </el-table-column>
              <el-table-column
                width="120"
                prop="empName"
                align="center"
                label="员工姓名">
              </el-table-column>
              <el-table-column
                width="200"
                prop="type"
                align="center"
                label="调动/奖惩/培训/调薪/离职">
              </el-table-column>
              <el-table-column
                width="200"
                align="center"
                label="时间">
                <template slot-scope="scope">{{ scope.row.tDate | formatDate }}</template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="remark"
                label="备注">
              </el-table-column>
            </el-table>
          </el-card>
        </div>
        <div style="display: flex;justify-content: space-between;text-align: left;margin: 10px 2px 2px;"
             v-if="salaries!==0">
<!--          <el-button type="danger" size="mini" icon="el-icon-delete" :disabled="multipleSelection.length==0"-->
<!--                     @click="deleteAll">批量删除-->
<!--          </el-button>-->
          <el-pagination
            background
            @size-change="sizeChange"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="currentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableLoading: false,
      index: 0,
      totalCount: -1,
      pageSize: 10,
      currentPage: 1,
      list: [], //后台返回的所有结果
      tableData: [], //当前页码的表格数据
      salaries: [],
      multipleSelection: [],
      salary: {
        id: '',
        eid: '',
        workID: '',
        type: '',
        tDate: '',
        remark: ''
      }
    };
  },
  methods: {
    // 导出excel
    exportRecord() {
      window.open("/statistics/record/export", "_parent");
    },
    sizeChange(size) {
      this.pageSize = size;
      this.loadSalaryCfg();
    },
    //分页操作
    currentChange(page) {
      this.currentPage = page;
      this.loadSalaryCfg();
    },
    deleteAll() {
      this.$confirm('删除[' + this.multipleSelection.length + ']条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var ids = '';
        this.multipleSelection.forEach(row => {
          ids = ids + row.id + ",";
        })
        this.doDelete(ids);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      this.dialogVisible = true;
      row.createDate = new Date(row.createDate);
      delete row.allSalary;
      this.salary = row;
    },
    handleDelete(index, row) {
      this.$confirm('删除[' + row.name + ']的记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDelete(row.id);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    doDelete(id) {
      var _this = this;
      _this.tableLoading = true;
      this.deleteRequest("/salary/sob/salary/" + id).then(resp => {
        _this.tableLoading = false;
        if (resp && resp.status == 200) {
          var data = resp.data;

          _this.loadSalaryCfg();
        }
      });
    },
    next() {
      var _this = this;
      if (this.index === 7) {
        if (this.salary.createDate && this.salary.basicSalary && this.salary.trafficSalary && this.salary.lunchSalary && this.salary.bonus && this.salary.pensionBase && this.salary.pensionPer && this.salary.medicalBase && this.salary.medicalPer && this.salary.accumulationFundBase && this.salary.accumulationFundPer) {
          if (this.salary.id) {//更新
            _this.tableLoading = true;
            this.putRequest("/salary/sob/salary", this.salary).then(resp => {
              _this.tableLoading = false;
              if (resp && resp.status == 200) {
                _this.dialogVisible = false;
                _this.index = 0;
                _this.loadSalaryCfg();
              }
            });
          } else {//添加
            this.$prompt('请输入账套名称', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消'
            }).then(({value}) => {
              this.salary.name = value;
              this.postRequest("/salary/sob/salary", this.salary).then(resp => {
                if (resp && resp.status == 200) {
                  var data = resp.data;

                  _this.dialogVisible = false;
                  _this.index = 0;
                  _this.loadSalaryCfg();
                }
              });
            }).catch(() => {
            });
          }
        } else {
          this.$message({type: 'error', message: '字段不能为空!'});
        }
      } else {
        this.index++;
      }
    },
    loadSalaryCfg() {
      this.tableLoading = true;
      var _this = this;
      this.getRequest("/statistics/record/personnel").then(resp => {
        _this.tableLoading = false;
        if (resp && resp.status === 200) {
          this.salaries = resp.data.data;
          this.totalCount = resp.data.total;
          this.tableData = this.getNeedArr(this.salaries, this.pageSize)[this.currentPage - 1];
          console.log(this.tableData);
        }
      })

    },
    getNeedArr(array, size) {       //获取所需指定长度分割的数组;参数1为用于分割的总数组,参数2为分割数组后每个小数组的长度
      const length = array.length;
      //判断不是数组，或者size没有设置，size小于1，就返回空数组
      if (!length || !size || size < 1) {
        return [];
      }
      //核心部分
      let index = 0; //用来表示切割元素的范围start
      let resIndex = 0; //用来递增表示输出数组的下标

      //根据length和size算出输出数组的长度，并且创建它。
      let result = new Array(Math.ceil(length / size));
      //进行循环
      while (index < length) {
        //循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
        result[resIndex++] = array.slice(index, (index += size));
      }
      //输出新数组
      return result;
    },
    emptySalary() {
      this.salary = {
        id: '',
        eid: '',
        type: '',
        tDate: '',
        remark: ''
      };
      this.index = 0;
    }
  },
  mounted: function () {
    this.loadSalaryCfg();
  }
};
</script>
<style>
.el-dialog__body {
  padding-bottom: 10px;
}
</style>
